<template>
    <a-form :model="props.form" :rules="props.rules" :label-col="{ style: { width: '100px', textAlign: 'left' } }"
        ref="formRef" :wrapper-col="{ span: 14 }">
        <div v-for="(item, index) in props.formList" :key="index">
            <a-form-item :label="item.label" :name="item.name">
                <div class="item">
                    <template v-if="item.component == 'assembly'">
                        <a-select ref="select" v-model:value="item.value[0]" :disabled="item.disabled"
                            style="width: 170px;" :placeholder="getPlaceholer(item)" :options="item.options">
                        </a-select>
                        <a-form-item-rest>
                            <a-input v-model:value="item.value[1]" :disabled="item.disabled"
                                :placeholder="getPlaceholer(item)"></a-input>
                        </a-form-item-rest>
                    </template>
                    <template v-if="item.component == 'input'">
                        <a-input v-model:value="item.value" :disabled="item.disabled"
                            :placeholder="getPlaceholer(item)" />
                    </template>
                    <template v-if="item.component == 'datePicker'">
                        <a-date-picker style="width: 100%;" :disabled="item.disabled" v-model:value="item.value"
                            :placeholder="getPlaceholer(item)" />
                    </template>
                    <template v-if="item.component == 'cascader'">
                        <a-cascader v-model:value="item.value" style="width: 100%;" :disabled="item.disabled"
                            :options="item.options" :placeholder="getPlaceholer(item)" />
                    </template>
                    <div class="error-msg" v-show="item.showError">{{ item.errorMsg ? item.errorMsg : item.label +
                        "不能为空"
                        }}</div>
                </div>
            </a-form-item>
            <div v-show="item.tip" class="tip">{{ item.tip }}</div>
        </div>
        <a-form-item>
            <div class="btn-area">
                <a-button @click="myModal.show = false">取消</a-button>
                <a-button type="primary" html-type="submit" @click='submit'>确认</a-button>
            </div>
        </a-form-item>
    </a-form>
</template>

<script setup lang='ts'>
const props = defineProps(['form', 'myModal', 'formList', 'rules']);
import { IndexFormItem } from '@/views/index/type';
const formRef = ref()
const emits = defineEmits();

watch(() => props.formList, (val) => {
    val.forEach((el: IndexFormItem) => {
        if (Array.isArray(el.value)) {
            if (el.value[0] && el.value[1]) {
                el.showError = false
            }
        } else if (el.value) {
            el.showError = false
        }
    })
}, { deep: true })

const submit = async () => {
    let flag: boolean = false;
    props.formList.forEach((el: IndexFormItem) => {
        if (Array.isArray(el.value)) {
            if (!el.value[0] || !el.value[1]) {
                el.showError = true
                flag = true
            } else {
                el.showError = false
            }
        } else if (!el.value) {
            el.showError = true
            flag = true
        } else {
            el.showError = false
        }
    })

    if (!flag) {
        emits('doSubmit', props.formList);
    }
}

const getPlaceholer = (item: IndexFormItem): string => {
    if (item.component === 'select' || item.component == 'datePicker') {
        return '请选择' + item.label;
    }
    return '请输入' + item.label;
};
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    gap: 8px;
    width: 370px;
    position: relative;
    margin-bottom: 10px;
}

.tip {
    width: 480px;
    height: 84px;
    font-weight: 400;
    font-size: 14px;
    color: #B3C0C8;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.btn-area {
    display: flex;
    align-items: center;
    width: 470px;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;

}

.error-msg {
    position: absolute;
    color: red;
    font-size: 12px;
    top: 35px;
    left: -100px
}
</style>